﻿<template>
  <div>
    <div class = "addColumn">
      <p @click = "handleAddOption()"> <i class = "iconfont icon-add"></i>添加页面事件或行为</p>
    </div>
    <el-table :data = 'currentPage.events' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
      <el-table-column align = "center" prop = 'eventsType' label = '事件或行为类别' min-width = "140px" :render-header = 'handelHelp'
      label-class-name = "初始化页面事件无需关联元素，类型为行为时无需绑事件">
        <template slot-scope = "scope">
          <el-select v-model = "scope.row.eventsType" placeholder = '请选择' clearable filterable @change = "(val) => {eventTypeChange(val, scope.$index)}">
            <el-option-group label = '页面初始化(无需关联元素)'>
              <el-option value = 'initPage' label = '初始化页面事件'></el-option>
            </el-option-group>
            <el-option-group label = '表格初始化/行事件(需绑定事件)'>
              <el-option value = 'initTable' label = '初始化表格事件'></el-option>
              <el-option value = 'deleteTable' label = '删除表格行事件'></el-option>
              <el-option value = 'activeTable' label = '启用事件'></el-option>
              <el-option value = 'deactiveTable' label = '停用事件'></el-option>
              <el-option value = 'selfDefineTable_export' label = '表格行导出事件(直接执行事件)'></el-option>
              <el-option value = 'selfDefineTable' label = '自定义表格行事件(直接执行事件)'></el-option>
            </el-option-group>
            <el-option-group label = '表格行行为（无需绑定事件）'>
              <el-option value = 'editTable' label = '编辑表格行事件'></el-option>
              <el-option value = 'showDetail' label = '查看表格行行为(查看详细)'></el-option>
              <el-option value = 'selfDefinePageTable' label = '自定义表格行行为(打开系统内页面)'></el-option>
              <el-option value = 'selfDefinePageTable_openPage' label = '自定义表格行行为(打开系统外页面)'></el-option>
              <el-option value = 'selfDefineDialogTable' label = '自定义表格行行为(打开弹窗)'></el-option>
            </el-option-group>
            <el-option-group label = '按钮事件(需绑定事件)'>
              <el-option value = 'searchInfo' label = '查询页面数据事件'></el-option>
              <el-option value = 'exportReport' label = '导出报表事件'></el-option>
              <el-option value = 'importReport' label = '导入报表事件'></el-option>
              <el-option value = 'submitForm' label = '提交表单'></el-option>
              <el-option value = 'submitDialogForm' label = '提交弹窗表单'></el-option>
              <el-option value = 'triggerEventType' label = '执行事件(只会触发事件)'></el-option>
              <el-option value = 'selfDefine_btnEvent' label = '自定义按钮事件'></el-option>
            </el-option-group>
            <el-option-group label = '按钮行为(无需绑定事件)'>
              <el-option value = 'addDialogForm' label = '新增事件'></el-option>
              <el-option value = 'editDialogForm' label = '编辑事件'></el-option>
              <el-option value = 'resetForm' label = '取消提交表单'></el-option>
              <el-option value = 'resetDialogForm' label = '取消提交弹窗表单'></el-option>
              <el-option value = 'selfDefinePage' label = '打开系统内新页面'></el-option>
              <el-option value = 'selfDefinePage_openPage' label = '打开系统外新页面'></el-option>
            </el-option-group>
            <!-- <el-option value = 'handleTable' label = '办理表格行事件'></el-option> -->
            <!-- <el-option value = 'deleteDialogForm' label = '删除事件'></el-option> -->
            <!-- <el-option value = 'addWorkflowPage' label = '新建流程表单'></el-option> -->
            <!-- <el-option value = 'handleWorkflowPage' label = '办理流程表单'></el-option> -->
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop = 'eventsNo' label = '事件名称' show-overflow-tooltip min-width="120px">
        <template slot-scope="scope">
          <el-select v-model = "scope.row.eventsNo" placeholder = '请选择' clearable filterable
          :disabled="!scope.row.eventsType || scope.row.eventsType.indexOf('reset') !== -1 || scope.row.eventsType.indexOf('showDetail') !== -1 || scope.row.eventsType.indexOf('selfDefineDialogTable') !== -1 || scope.row.eventsType === 'selfDefinePage_openPage' || scope.row.eventsType === 'selfDefinePageTable_openPage' || scope.row.eventsType === 'selfDefinePage' || scope.row.eventsType === 'selfDefinePageTable' || scope.row.eventsType.indexOf('edit') !== -1 || scope.row.eventsType.indexOf('addDialogForm') !== -1">
            <el-option v-for = '(eventItem, eventIndex) in allEvents' :key = 'eventIndex' :label = 'eventItem.name' :value = 'eventItem.no'></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop = 'relatedTag' label = '关联元素' show-overflow-tooltip min-width="120px">
        <template slot-scope="scope">
          <el-select v-model = "scope.row.relatedTag" placeholder = '请选择' :disabled="!scope.row.eventsType || scope.row.eventsType === 'initPage'">
            <el-option :label = 'modelItem.name' :value='modelItem.model' v-for = 'modelItem in allSingleModel' :key = 'modelItem.model'></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop = 'actionIndex' label = '执行顺序' min-width="120px">
        <template slot-scope="scope">
          <el-input-number size="mini" v-model="scope.row.actionIndex" :min="1" :max="10" :step="1" step-strictly></el-input-number>
        </template>
      </el-table-column>
      <el-table-column align="center" prop = 'actionIndex' label = '设置词典表' min-width="80px">
        <template slot-scope="scope">
          <span @click = 'setEventDic(scope.row, scope.$index)' class = 'clickStatus'>...</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop = 'dialogUid' label = '弹窗页面' show-overflow-tooltip min-width="120px">
        <template slot-scope="scope">
          <el-select v-model = 'scope.row.dialogUid' clearable filterable
          :disabled = "!scope.row.eventsType || scope.row.eventsType.indexOf('triggerEventType') !== -1 || scope.row.eventsType.indexOf('selfDefine_btnEvent') !== -1 || scope.row.eventsType.indexOf('importReport') !== -1 || scope.row.eventsType.indexOf('_openPage') !== -1 || scope.row.eventsType.indexOf('exportReport') !== -1 || scope.row.eventsType.indexOf('selfDefineTable') !== -1 || scope.row.eventsType.indexOf('activeTable') !== -1 || scope.row.eventsType.indexOf('delete') !== -1 || scope.row.eventsType.indexOf('init') !== -1 || scope.row.eventsType.indexOf('submit') !== -1 || scope.row.eventsType.indexOf('reset') !== -1 || scope.row.eventsType.indexOf('search') !== -1">
            <el-option :label = "pageUid.category ? (pageUid.name + '(' + pageUid.category + ')') : pageUid.name" :value = 'pageUid.uid' v-for = "pageUid in allPageUid" :key = 'pageUid.uid'></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop = 'dialogUid' label = '按钮名称' label-class-name="自定义表格行行为时，可设置行按钮名称">
        <template slot-scope="scope">
          <el-input v-model = 'scope.row.selfName' clearable placeholder="请输入" :disabled="scope.row.eventsType !== 'selfDefineTable' && scope.row.eventsType !== 'selfDefineDialogTable' && scope.row.eventsType !== 'selfDefinePageTable' && scope.row.eventsType !== 'selfDefinePageTable_openPage'"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop = 'dialogUid' label = 'icon名称' label-class-name="自定义表格行行为时，可设置行按钮前的icon名称">
        <template slot-scope="scope">
          <el-input v-model = 'scope.row.selfIconName' clearable placeholder="请输入" :disabled="scope.row.eventsType !== 'selfDefineTable' && scope.row.eventsType !== 'selfDefineDialogTable' && scope.row.eventsType !== 'selfDefinePageTable' && scope.row.eventsType !== 'selfDefinePageTable_openPage'"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop = 'pageType' label = '分页方式' show-overflow-tooltip>
        <template slot-scope="scope">
          <el-select v-model="scope.row.pageType" placeholder = '请选择' clearable filterable :disabled="scope.row.eventsType !== 'initTable' && scope.row.eventsType !== 'searchInfo'">
            <el-option label = '前端分页' value = 'front'></el-option>
            <el-option label = '后台分页' value = 'back'></el-option>
          </el-select>
        </template>
      </el-table-column>
      <!-- 自定义的事件，只需要在自定义打开弹窗和自定义执行事件时添加表达式 -->
      <el-table-column align="center" label = '表格行事件隐藏表达式或新页面链接' show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if = "scope.row.eventsType && scope.row.eventsType !== 'initTable' && (scope.row.eventsType.indexOf('Table') !== -1 || scope.row.eventsType.indexOf('openPage') !== -1)" class = 'clickStatus'
          @click = "settingRowEventHiddenExpress(scope.row, scope.$index)">点击设置</span>
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="30">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleOptionsRemove(scope.$index)" title = '移除'>
            <i class="iconfont icon-shanchu"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Event-Dic :row = 'clickRow' :eventDicDialog = 'eventDicDialog' @sureSeetingEventDic = 'sureSeetingEventDic' @giveUp = 'eventDicDialog = false'></Event-Dic>
    <!-- 设置表格行事件隐藏表达式的弹窗 -->
    <Row-Event-Hidden-Express :rowEventHiddenExpressRow = 'rowEventHiddenExpressRow' :rowEventHiddenExpressDialog = 'rowEventHiddenExpressDialog'
    @settingRowEventHiddenExpressSuccess = 'settingRowEventHiddenExpressSuccess' @settingRowEventHiddenExpressFailed = 'rowEventHiddenExpressDialog = false'></Row-Event-Hidden-Express>
  </div>
</template>

<script>
import EventDic from '@/components/Events/EventsDic.vue'
// 表格行事件隐藏表达式的弹窗
import RowEventHiddenExpress from './RowEventHiddenExpress.vue'
export default {
  props: ['currentPageUid', 'currentPage', 'allSingleModel', 'showEditContentDialog', 'from'],
  data () {
    return {
      allEvents: [],
      allPageUid: [],
      // 打开设置页面词典表的弹窗
      eventDicDialog: false,
      clickRow: null,
      clickIndex: null,
      // 表格行事件隐藏的弹窗
      rowEventHiddenExpressDialog: false,
      rowEventHiddenExpressRow: null,
      rowEventHiddenExpressIndex: null
    }
  },
  created () {
    this.getAllEvents()
    this.clickRow = null
    this.clickIndex = null
    if (this.from === 'workflow') {
      this.getAllWorkflowPage()
    } else {
      this.getAllDynamicPage()
    }
  },
  methods: {
    // 事件或者行为的类型变化时
    eventTypeChange (val, index) {
      if (val) {
        if (val === 'initPage') {
          this.currentPage.events[index].dialogUid = ''
          this.currentPage.events[index].relatedTag = ''
        } else if (val === 'triggerEventType' || val === 'importReport' || val === 'selfDefinePageTable_openPage' || val === 'selfDefinePage_openPage' || val === 'exportReport' || val === 'initTable' || val === 'selfDefineTable' || val === 'deleteTable' || val === 'activeTable' || val === 'deactiveTable' || val === 'resetForm' || val === 'resetDialogForm' || val === 'searchInfo' || val === 'submitForm' || val === 'submitDialogForm' || val === 'selfDefine_btnEvent') {
          this.currentPage.events[index].dialogUid = ''
        } else if (val === 'addDialogForm' || val === 'selfDefinePageTable_openPage' || val === 'selfDefinePage_openPage' || val === 'editDialogForm' || val === 'resetForm' || val === 'resetDialogForm' || val === 'editTable' || val === 'selfDefineDialogTable' || val === 'selfDefinePageTable' || val === 'selfDefinePage') {
          this.currentPage.events[index].eventsNo = ''
        }
      } else {
        this.$set(this.currentPage.events, index, {
          eventsNo: '',
          eventsType: '',
          relatedTag: '',
          dialogUid: '',
          actionIndex: 1,
          inputDic: [],
          outputDic: [],
          selfName: '',
          selfIconName: 'icon-bianji',
          pageType: 'back',
          // 行事件隐藏表达式
          row_express: '',
          linkUrlExpress: ''
        })
      }
    },
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect="dark" placement="top">
            <div slot='content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 获取所有的动态表单事件
    getAllEvents () {
      this.$get('/events4dform/alllist').then(data => {
        if (data.data.result.code === 'success') {
          this.allEvents = data.data.result.data
        } else if (data.data.result.code === 'failed') {
          this.$message({
            message: data.data.result.msg,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取所有动态表单的页面
    getAllDynamicPage () {
      this.allPageUid = []
      this.$get('/d_form', {
        type: 'normal'
      }).then((data) => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          if (dataResult.data.length) {
            dataResult.data.forEach(item => {
              if (item.uid !== this.currentPageUid) {
                this.allPageUid.push(item)
              }
            })
          }
        } else {
          this.$message.error(data.data.result.msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取所有流程表单的页面
    getAllWorkflowPage () {
      this.allPageUid = []
      this.$basicWFGet('/d_form').then((data) => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          if (dataResult.data.length) {
            dataResult.data.forEach(item => {
              if (item.uid !== this.currentPageUid) {
                this.allPageUid.push(item)
              }
            })
          }
        } else {
          this.$message.error(data.data.result.msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 删除选项时
    handleOptionsRemove (index) {
      this.currentPage.events.splice(index, 1)
    },
    // 新增选项时
    handleAddOption () {
      this.currentPage.events.push({
        eventsNo: '',
        eventsType: '',
        relatedTag: '',
        dialogUid: '',
        actionIndex: 1,
        inputDic: [],
        outputDic: [],
        selfName: '',
        selfIconName: 'icon-bianji',
        pageType: 'back',
        // 行事件隐藏表达式
        row_express: '',
        linkUrlExpress: ''
      })
    },
    // 设置词典表时
    setEventDic (row, index) {
      if (row.eventsNo) {
        this.eventDicDialog = true
        this.clickRow = JSON.parse(JSON.stringify(row))
        this.clickIndex = index
      } else {
        this.$message({
          message: '请添加需要的事件',
          type: 'warning'
        })
      }
    },
    // 设置词典表成功时
    sureSeetingEventDic (fromSetting) {
      this.eventDicDialog = false
      this.currentPage.events[this.clickIndex].inputDic = fromSetting.inputDic
      this.currentPage.events[this.clickIndex].outputDic = fromSetting.outputDic
    },
    // 设置表格行事件隐藏的表达式
    settingRowEventHiddenExpress (row, index) {
      this.rowEventHiddenExpressDialog = true
      this.rowEventHiddenExpressRow = JSON.parse(JSON.stringify(row))
      this.rowEventHiddenExpressIndex = index
    },
    // 设置表格行事件隐藏的表达式成功时
    settingRowEventHiddenExpressSuccess (fromSetting) {
      this.rowEventHiddenExpressDialog = false
      this.$set(this.currentPage.events[this.rowEventHiddenExpressIndex], 'row_express', fromSetting.rowExpress)
      this.$set(this.currentPage.events[this.rowEventHiddenExpressIndex], 'linkUrlExpress', fromSetting.linkUrlExpress)
    }
  },
  watch: {
    showEditContentDialog: {
      handler (val) {
        if (val) {
          this.getAllEvents()
          this.clickRow = null
          this.clickIndex = null
          if (this.from === 'workflow') {
            this.getAllWorkflowPage()
          } else {
            this.getAllDynamicPage()
          }
        }
      },
      deep: true
    }
  },
  components: {
    EventDic, RowEventHiddenExpress
  }
}
</script>
